<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://oss.chathot.me/action/js/vue.min.js?v=6676767878.6"></script>
    <script src="https://oss.chathot.me/action/mobile_js/mobile_until.js?v=6676767878.6"></script>
    <script src="https://oss.chathot.me/action/mobile_js/Blob.min.js?v=6676767878.6"></script>
    <script src="https://oss.chathot.me/action/js/loading.js?v=6676767878.6"></script>
    <link rel="stylesheet" href="https://oss.chathot.me/action/js/var.css?v=6676767878.6" />
    <script src="https://oss.chathot.me/action/mobile_js/request_2.js?v=6676767878.6"></script>
    <link rel="stylesheet" href="./orientation.css?v=6676767878.6">
    <link rel="stylesheet" href="./prientations.css?v=6676767878.6">
    <script src="./miss.js?v=6676767878.6"></script>
    <script src="./miss1.js?v=6676767878.6"></script>
    <script>
        function environment() {
            return false
        }
    </script>
    <!-- 测试 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
    </script>
</head>

<body>
    <div class="app" id="app">
        <div class="head">
            <div class="countdown">
                <span>{{ time1 }}d</span>
                <span>{{ time2 }}h</span>
                <span>{{ time3 }}m</span>
                <span>{{ time6 }}s</span>
            </div>
            <div class="rewardsRules">
                <div class="left" @click='rewards'>
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/rewards.png" alt="">
                </div>
                <div class="right" @click='rules'>
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/rule.png" alt="">
                </div>
            </div>
        </div>
        <div class="welcome">
            <div class="welcome-text">
                <div class="welcometext">
                    StarChat welcome everyone to join! We warmly welcome
                    all new users, please join us in playing, partying, and
                    meeting more friends! The person who gives the most
                    gifts will get a unique customized avatar gift!
                </div>
            </div>
            <div class="reward">
                <div class="starchat">
                    <div class="star-img">
                        <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/datubiao1.png" alt="">
                    </div>
                    <div class="star-jb"> <span>5</span> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                    </div>
                </div>
                <div class="starchat">
                    <div class="star-img">
                        <img style="height: 100% ; width: 100%;"
                            src="https://oss.chathot.me/action/halloweenDirectory/orientation/datubiao2.png" alt="">
                    </div>
                    <div class="star-jb"> <span>333</span> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                    </div>
                </div>
                <div class="starchat">
                    <div class="star-img">
                        <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/datubiao3.png" alt="">
                    </div>
                    <div class="star-jb"> <span>2000</span> <img
                            src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="aMonster" style="margin-top: .5rem;">
            <ul>
                <li :class="{'active':tabT==1}" @click='changeTab(1)' style="margin-left: .2rem;">
                    <span> Lista popular</span>
                </li>
                <li :class="{'active':tabT==2}" @click='changeTab(2)'>
                    <span> Lista amistosa </span>

                </li>
                <li :class="{'active':tabT==3}" @click='changeTab(3)' style="margin-right: .2rem;">
                    <span> Principiante</span>

                </li>
            </ul>
        </div>

        <div v-show='tabT==1'>
            <div class="popularRank">
                <div>Solo pueden participar nuevos usuarios, ordenados por </div>
                <div>puntos de regalo recibidos.</div>
            </div>
            <div class="popularRanki">

                <div class="popularMe" v-if='mylist.length!=0'>
                    <div class="left">
                        <div class='left-num' v-if='mylist.rank>30'>30+</div>
                        <div class='left-num' v-else>{{mylist.rank}}</div>
                        <div class="left-img" @click='go_user(mylist.user_id)'><img :src="mylist.avatar" alt=""></div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{mylist.nickname}}</div>
                        <div class="central-id">ID:{{mylist.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(mylist.point)}}</div>
                        <div class="right-img"> <img
                                src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="popularLet" v-for='item in list' :key='item.user_id'>
                    <div class="left">
                        <div class='left-num'>{{item.rank}}</div>
                        <div class="left-img" @click='go_user(item.user_id)'><img :src="item.avatar" alt=""></div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{item.nickname}}</div>
                        <div class="central-id">ID:{{item.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(item.point)}}</div>
                        <div class="right-img"> <img
                                src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                        </div>
                    </div>
                </div>



            </div>
        </div>
        <div v-show='tabT==2'>
            <div class="popularRank">
                <div>Solo pueden participar nuevos usuarios, ordenados por </div>
                <div>puntos de regalo recibidos.</div>
            </div>
            <div class="popularRanki">

                <div class="popularMe" v-if='myFriendlist.length!=0'>
                    <div class="left">
                        <div class='left-num' v-if='myFriendlist.rank>30'>30+</div>
                        <div class='left-num' v-else>{{myFriendlist.rank}}</div>
                        <div class="left-img"><img :src="myFriendlist.avatar" @click='go_user(myFriendlist.user_id)'
                                alt=""></div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{myFriendlist.nickname}}</div>
                        <div class="central-id">ID:{{myFriendlist.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(myFriendlist.point)}}</div>
                        <div class="right-img"> <img
                                src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                        </div>
                    </div>
                </div>

                <div class="popularLet" v-for='item in friendList' :key='item.user_id'>
                    <div class="left">
                        <div class='left-num'>{{item.rank}}</div>
                        <div class="left-img" @click='go_user(item.user_id)'><img :src="item.avatar" alt=""></div>
                    </div>
                    <div class="central">
                        <div class="central-name" style="overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;">{{item.nickname}}</div>
                        <div class="central-id">ID:{{item.user_no}}</div>

                    </div>
                    <div class="right">
                        <div class="right-num">{{num(item.point)}}</div>
                        <div class="right-img"> <img
                                src="https://oss.chathot.me/action/halloweenDirectory/orientation/goldCOINS.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-show='tabT==3'>

            <div class="dvi">
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">1</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="newbie-image">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/1.png" alt="">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">2</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="microphone">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/2.png" alt="">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/22.png" alt=""
                        style="margin-left: .1rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">3</div>
                    </div>
                    <div class="newbieGuide-text">Después de prestar atención a la habitación y
                        unirse a la habitación, puede encontrar la habitación que le gusta más rápido en la lista, y
                        también
                        puede crear su propia habitación aquí;</div>
                </div>
                <div class="start-p" style="display: flex; justify-content: center;">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/3.png" alt="" style="	width: 5.81rem;
        height: 2.71rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">4</div>
                    </div>
                    <div class="newbieGuide-text">Después de prestar atención a la habitación y
                        unirse a la habitación, puede encontrar la habitación que le gusta más rápido en la lista, y
                        también
                        puede crear su propia habitación aquí;</div>
                </div>
                <div class="start-p" style="display: flex; justify-content: center;">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/4.png" alt="" style="width: 5.81rem;
        height: 1.41rem;">
                </div>
                <div class="start-p" style="display: flex; justify-content: center;">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/66.png" alt="" style="width: 5.81rem;
        height: 4.21rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">5</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem;">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/5.png" alt="" style="width: 6rem;
        height: 1.81rem;">
                </div>
                <div class="newbieGuide" style="height: 1rem;">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">6</div>
                    </div>
                    <div class="newbieGuide-text">Puedes recargar aquí o contactarte con nuestra administradora <span
                            style="color: #52c3e8;">Lucia (ID: 10163 >>)</span>;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/6.png" alt="" style="width: 6rem;
        height: 1.81rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">7</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/7.png" alt="" style="width: 5.81rem;
        height: 3.83rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">8</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/8.png" alt="" style="width: 5.98rem;
        height: 1.79rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">9</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/9.png" alt="" style="width: 5.81rem;
        height: 1.58rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">10</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/10.png" alt="" style="width: 5.81rem;
        height: 1.2rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">11</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/11.png" alt="" style="width: 6rem;
        height: 1.78rem;">
                </div>
                <div class="newbieGuide">
                    <div class="newbieGuide-b">
                        <div class="newbieGuide-image">12</div>
                    </div>
                    <div class="newbieGuide-text">Después de registrarse, los nuevos usuarios pueden obtener sombreros y
                        obsequios exclusivos. Los obsequios se guardarán en la mochila. Haga clic en el botón de
                        obsequio en
                        la habitación para ingresar a la mochila;</div>
                </div>
                <div class="start-p" style="margin-left: .7rem;  padding-bottom: .3rem; ">
                    <img src="https://oss.chathot.me/action/halloweenDirectory/orientation/12.png" alt="" style="width: 5.81rem;
        height: 2.78rem;">
                </div>
            </div>
        </div>
        <div class="popupWindow" v-if='flag' @click="popUp">
            <div class="poprewads" @click.stop=''>
                <div class="poprewadsk">
                    <div class="pophead">OTORGAR</div>
                </div>
                <div class="rewclose" @click='rewColse'><img
                        src="https://oss.chathot.me/action/halloweenDirectory/orientation/close.png" alt=""></div>
                <div style="height: 9rem; overflow: scroll;">
                    <div class="rewad-Top">
                        TOP1
                    </div>
                    <div class="rewRank">
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                    </div>
                    <div class="rewRankb">
                        <div class="rewimage">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewimage" style=" margin-left:.2rem">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                    </div>
                    <div class="rewad-Top" style="padding-top: .4rem;">
                        TOP2
                    </div>
                    <div class="rewRank">
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewadpic">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                    </div>
                    <div class="rewad-Top" style="padding-top: .4rem;">
                        TOP3
                    </div>
                    <div class="rewRankb">
                        <div class="rewimage">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                        <div class="rewimage" style=" margin-left:.2rem">
                            <div class="rewadpic-img"></div>
                            <div class="rewadpic-num">Coche*1</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="popupWindow" v-if='flg' @click='popUps'>
            <div class="poprewads" style="height:8.5rem; width:6.7rem" @click.stop=''> 
                <div class="poprewadsk">
                    <div class="pophead">REGLA</div>
                </div>
                <div class="rewclose" @click='ruleColse'><img
                        src="https://oss.chathot.me/action/halloweenDirectory/orientation/close.png" alt=""></div>
                <div class="ruleText">
                    <div style="padding-top: .4rem;"> 1. Se puede participar en esta actividad de 00:00 a 23:59 hora
                        Colombia diariamente y se premia a los ganadores a las 24:00 hora Colombia diariamente.</div>
                    <div> 2. El usuario que recibe más regalo de gorro de diferentes personas tiene una popularidad más
                        alto. La popularidad más alta es la estrella de cumpleaños y la persona que le da más regalos a
                        la
                        estrella de cumpleaños es la estrella de la fiesta.</div>
                    <div>3. Cada vez que recibe un gorro de cumpleaños de una persona, puedes ganar una popularidad; si
                        es
                        un gorro de VIP, puedes ganar dos popularidades (cada movil y cada IP solo pueden contribuir una
                        vez
                        a la popularidad de una persona).</div>
                    <div>4. La entrada y el marco de cumpleaños de la estrella del cumpleaños </div>
                </div>
            </div>

        </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    flag: false,
                    flg: false,
                    time1: '00',
                    time2: '00',
                    time3: '00',
                    time6: '00',
                    tabT: 1,
                    token: GetUrlParam('token'),
                    activity_id: environment() ? 0 : 442,
                    user_id: GetUrlParam('user_id'),
                    list: '',
                    mylist: '',
                    friendList: '',
                    myFriendlist: '',
                    demo: '',
                    lan: ''
                }
            },
            mounted() {
                this.$nextTick(() => {
                    // var lan=this.lan=judge_lan(GetUrlParam('language'), language);
                    document.title = 'orientation'
                    this.getPopular()
                    this.getmyInfo()
                    this.getFriend()
                })
            },
            methods: {
                 //上报UV
                //  setUv: function () {
                //     var data = {
                //         op: "activity_uv",
                //         user_id: GetUrlParam('user_id'),
                //         token: GetUrlParam('token'),
                //         active_id: this.activity_id,
                //     };
                //     api_activity_data(data).then((res) => {
                //         // console.log('uv 的信息返回：', res)
                //         if (res.status == 200) {}
                //     })
                // },
                //个人主页
                go_user(id) {
                    userDetails(id);
                },
                //收礼
                getPopular() {
                    console.log('id:', this.user_id, '---token:', this.token)
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 2,
                    };
                    return ajax2("GET", query, {}, "api/NewUserPartyController/giftRank")
                        .then((res) => {
                            this.list = res.data.list
                            this.mylist = res.data.my_rank_data
                        })

                },
                //送礼
                getFriend() {
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,
                        type: 1,
                    };
                    return ajax2("GET", query, {}, "api/NewUserPartyController/giftRank")
                        .then((res) => {

                            this.friendList = res.data.list
                            this.myFriendlist = res.data.my_rank_data
                        })

                },
                //活动信息
                getmyInfo() {
                    let query = {
                        user_id: this.user_id,
                        user_token: this.token,

                    };
                    return ajax2("GET", query, {}, "api/NewUserPartyController/getActData")
                        .then((res) => {
                            console.log(res);
                            this.leftTimer(res.data.djs)

                        })
                },
                changeTab(num) {

                    this.tabT = num
                },
                //奖励弹窗
                rewards() {
                    this.flag = true
                    document.body.style.overflowY = "hidden"
                },
                rewColse() {
                    this.flag = false
                    document.body.style.overflowY = "auto"
                },
                //点击外面关闭弹窗
                popUp(){
                    this.flag = false
                    document.body.style.overflowY = "auto" 
                },
                //规则弹窗
                rules() {
                    this.flg = true
                    document.body.style.overflowY = "hidden"

                },
                ruleColse() {
                    this.flg = false
                    document.body.style.overflowY = "auto"

                },
                //点击外面关闭弹窗
                popUps(){
                    this.flg = false
                    document.body.style.overflowY = "auto"
                },
                //倒计时
                leftTimer: function (leftTime) {
                    var self = this;
                    var leftTime = leftTime
                    var Inter = setInterval(function () {
                        if (leftTime > 0) {
                            // console.log('q1aa')
                            //计算剩余的毫秒数
                            var days = parseInt(leftTime / 60 / 60 / 24, 10); //计算剩余的天数
                            var hours = parseInt(leftTime / 60 / 60 % 24, 10); //计算剩余的小时
                            var minutes = parseInt(leftTime / 60 % 60, 10); //计算剩余的分钟
                            var seconds = parseInt(leftTime % 60, 10); //计算剩余的秒数
                            hours = self.checkTime(hours);
                            minutes = self.checkTime(minutes);
                            seconds = self.checkTime(seconds);
                            self.time1 = days;
                            self.time2 = hours;
                            self.time3 = minutes;
                            self.time6 = seconds;
                            // self.time1 = days;
                            // self.time2 = hours + ":" + minutes + ":" + seconds;
                            leftTime--;
                        } else {
                            self.time1 = '00';
                            self.time2 = '00';
                            self.time3 = '00';
                            self.time6 = '00';
                            // self.time1 = '0';
                            // self.time2 = '00:00:00';
                            clearInterval(Inter)
                        }
                    }, 1000);
                },
                checkTime: function (i) { //将0-9的数字前面加上0，例1变为01
                    if (i < 10) {
                        i = "0" + i;
                    }
                    return i;
                },
                num(number) {
                    var num = '';
                    if (number < 1000) {
                        num = number;
                    } else if (number >= 1000 && number < 1000000) {
                        var txt = (number / 1000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'K';
                    } else if (number >= 1000000) {
                        var txt = (number / 1000000).toFixed(3);
                        num = this.formatDecimal(txt, 1) + 'M';
                    }
                    return num;
                },
                formatDecimal(num, decimal) {
                    // console.log(num)
                    num = num.toString();
                    var index = num.indexOf('.');
                    if (index !== -1) {
                        num = num.substring(0, decimal + index + 1);
                    } else {
                        num = num.substring(0);
                    }
                    return parseFloat(num).toFixed(decimal);
                },
            }
        })
    </script>

</body>

</html>